<template>
  <section id="section-download" class="d-flex flex-column align-items-center">
    <b-img
      src="/images/download-intro.jpg"
      alt="download intro"
      width="310"
      height="110"
    />
    <b-button variant="light" pill>
      下载魁牛APP>>>
    </b-button>
    <b-button variant="light" pill>
      免安装进入商城>>>
    </b-button>
    <b-img
      src="/images/mp-qrcode.jpg"
      alt="关注魁牛官方公众号，享受最新产品、最优内容推送"
      width="120"
      height="120"
      thumbnail
    />
    <p>关注魁牛官方公众号<br />享受最新产品、最优内容推送</p>
  </section>
</template>

<style lang="scss" scoped>
#section-download {
  background-color: rgba(253, 190, 34, 1);
  padding-top: 50px;
  padding-bottom: 20px;
  button {
    width: 80%;
    max-width: 316px;
    height: 50px;
    font-size: 14px;
    color: #4a4a4a;
    letter-spacing: 0.5px;
    background-color: #fff;
    box-shadow: 0 1px 8px -2px;
    margin-top: 35px;
  }
  button:last-of-type {
    margin-bottom: 35px;
  }
  p {
    width: 130px;
    color: #fff;
    text-align: center;
    margin-top: 11px;
  }
}
</style>
